<template>
  <div class="py-5">
    <div class="container">
      <div class="row mb-4">
        <div class="col-12">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><NuxtLink to="/">首页</NuxtLink></li>
              <li class="breadcrumb-item active" aria-current="page">关于我们</li>
            </ol>
          </nav>
        </div>
        <div class="col-12 text-center mb-5">
          <h1 class="fw-bold">关于我们</h1>
          <p class="text-muted lead">专业旅游服务平台，致力于提供卓越的旅行体验</p>
        </div>
      </div>
      
      <div class="row align-items-center mb-5">
        <div class="col-lg-6 mb-4 mb-lg-0">
          <div class="bg-light" style="height: 400px;"></div>
        </div>
        <div class="col-lg-6">
          <h2 class="fw-bold mb-4">我们的故事</h2>
          <p class="lead">
            TravelExplorer成立于2010年，是一家专注于高品质旅游服务的公司。
          </p>
          <p>
            我们拥有一支经验丰富的旅游专家团队，深入了解全球各地的文化、历史和风土人情。
            致力于为客户量身定制独特而难忘的旅行体验。
          </p>
          <p>
            经过十多年的发展，我们已经服务了超过10万名来自世界各地的旅客，
            成为了行业内备受信赖的品牌。
          </p>
          <div class="row mt-4">
            <div class="col-md-4 mb-3">
              <div class="text-center">
                <div class="display-5 fw-bold text-primary">10+</div>
                <div class="text-muted">成立年数</div>
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <div class="text-center">
                <div class="display-5 fw-bold text-primary">100K+</div>
                <div class="text-muted">服务客户</div>
              </div>
            </div>
            <div class="col-md-4 mb-3">
              <div class="text-center">
                <div class="display-5 fw-bold text-primary">50+</div>
                <div class="text-muted">目的地</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="row mb-5">
        <div class="col-12 text-center mb-5">
          <h2 class="fw-bold">核心价值</h2>
          <p class="text-muted">我们始终秉持以下理念，为客户提供卓越服务</p>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card border-0 h-100 text-center p-4">
            <div class="rounded-circle bg-primary d-inline-flex align-items-center justify-content-center mx-auto mb-4" 
                 style="width: 100px; height: 100px;">
              <i class="bi bi-stars text-white fs-1"></i>
            </div>
            <h5 class="fw-bold">卓越品质</h5>
            <p class="text-muted">
              我们只选择最优质的合作伙伴和服务供应商，
              确保每一位客户的旅行体验都超越期望。
            </p>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card border-0 h-100 text-center p-4">
            <div class="rounded-circle bg-primary d-inline-flex align-items-center justify-content-center mx-auto mb-4" 
                 style="width: 100px; height: 100px;">
              <i class="bi bi-shield-check text-white fs-1"></i>
            </div>
            <h5 class="fw-bold">安全可靠</h5>
            <p class="text-muted">
              安全是旅行的第一要务。我们提供全方位的安全保障措施，
              让客户安心享受旅程。
            </p>
          </div>
        </div>
        <div class="col-md-4 mb-4">
          <div class="card border-0 h-100 text-center p-4">
            <div class="rounded-circle bg-primary d-inline-flex align-items-center justify-content-center mx-auto mb-4" 
                 style="width: 100px; height: 100px;">
              <i class="bi bi-person-hearts text-white fs-1"></i>
            </div>
            <h5 class="fw-bold">贴心服务</h5>
            <p class="text-muted">
              24小时客户服务团队随时待命，
              提供个性化解决方案和即时帮助。
            </p>
          </div>
        </div>
      </div>
      
      <div class="row mb-5">
        <div class="col-12 text-center mb-5">
          <h2 class="fw-bold">团队成员</h2>
          <p class="text-muted">我们的专业团队致力于创造非凡的旅行体验</p>
        </div>
        <div class="col-md-3 col-6 mb-4">
          <div class="text-center">
            <div class="bg-light rounded-circle mx-auto mb-3" style="width: 150px; height: 150px;"></div>
            <h5 class="fw-bold">陈志远</h5>
            <p class="text-muted mb-1">创始人 & CEO</p>
            <div class="d-flex justify-content-center gap-2">
              <a href="#"><i class="bi bi-facebook text-muted"></i></a>
              <a href="#"><i class="bi bi-twitter text-muted"></i></a>
              <a href="#"><i class="bi bi-linkedin text-muted"></i></a>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-6 mb-4">
          <div class="text-center">
            <div class="bg-light rounded-circle mx-auto mb-3" style="width: 150px; height: 150px;"></div>
            <h5 class="fw-bold">林晓雨</h5>
            <p class="text-muted mb-1">首席运营官</p>
            <div class="d-flex justify-content-center gap-2">
              <a href="#"><i class="bi bi-facebook text-muted"></i></a>
              <a href="#"><i class="bi bi-twitter text-muted"></i></a>
              <a href="#"><i class="bi bi-linkedin text-muted"></i></a>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-6 mb-4">
          <div class="text-center">
            <div class="bg-light rounded-circle mx-auto mb-3" style="width: 150px; height: 150px;"></div>
            <h5 class="fw-bold">王建民</h5>
            <p class="text-muted mb-1">产品总监</p>
            <div class="d-flex justify-content-center gap-2">
              <a href="#"><i class="bi bi-facebook text-muted"></i></a>
              <a href="#"><i class="bi bi-twitter text-muted"></i></a>
              <a href="#"><i class="bi bi-linkedin text-muted"></i></a>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-6 mb-4">
          <div class="text-center">
            <div class="bg-light rounded-circle mx-auto mb-3" style="width: 150px; height: 150px;"></div>
            <h5 class="fw-bold">赵美玲</h5>
            <p class="text-muted mb-1">客户关系经理</p>
            <div class="d-flex justify-content-center gap-2">
              <a href="#"><i class="bi bi-facebook text-muted"></i></a>
              <a href="#"><i class="bi bi-twitter text-muted"></i></a>
              <a href="#"><i class="bi bi-linkedin text-muted"></i></a>
            </div>
          </div>
        </div>
      </div>
      
      <div class="bg-primary bg-opacity-10 rounded-3 p-5 text-center">
        <h2 class="fw-bold mb-3">加入我们</h2>
        <p class="lead mb-4">
          如果您热爱旅行并希望与我们一起创造非凡的旅行体验，欢迎加入我们的团队！
        </p>
        <NuxtLink to="/contact" class="btn btn-primary btn-lg">联系我们</NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'default'
})

useHead({
  title: '关于我们 - TravelExplorer'
})
</script>